<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "commongongreliangzhanbi",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbGRLZB": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale * this.scalecom;

    //供热占比饼状图
    let rdlc = 0;
    let glf = 0;
    // let rdlc = Number(pipenetDataObj["sa_040qc"]).toFixed(0);
    // let glf = Number(pipenetDataObj["sa_041qc"]).toFixed(0);

    var option = {
      // backgroundColor:'rgba(14, 18, 34, 0.76)',
      // title: {
      //   text: "供热量占比",
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: 36 * scale,
      //     fontWeight: "bold"
      //   }
      // },
      grid: {
        bottom: "5%",
        top: "5%",
        left: "5%",
        right: "5%",
        containLabel: true
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} %",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale
        }
      },
      series: [
        {
          type: "pie",
          radius: "60%",
          center: ["50%", "50%"],
          // color: ['#FCC708', '#00C1FE'],
          // radius: '50%',
          selectedMode: "single",
          selectedOffset: 10,
          clockwise: true,
          color: ["#43cadd", "#3893e5"], //浅色 深色
          data: [
            {
              value: rdlc,
              name: "热电联产"
            },
            {
              value: glf,
              name: "锅炉房"
            }
          ].sort(function(a, b) {
            //【2019年11月8日】为了量多的显示深蓝色 sort以后是从小到大排的 所以需要把浅色的放在前面
            return a.value - b.value;
          }),
          label: {
            normal: {
              textStyle: {
                fontSize: 30 * scale
              },
              formatter: function(params, ticket, callback) {
                return (
                  "{white|" +
                  params.name +
                  "}\n{blue|" +
                  params.value +
                  "}{white|%}"
                );
              },
              rich: {
                white: {
                  color: "#fff",
                  // align: 'center',
                  fontSize: 30 * scale,
                  padding: [10, 0]
                },
                blue: {
                  color: "#53F3F3",
                  fontSize: 32 * scale
                  // align: 'center'//左对齐
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 40 * scale,
              length2: 40 * scale,
              lineStyle: {
                width: 1 //线加粗
              }
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 1, //【2019年11月7日】设置两个饼图之间的间隔 可以实现饼图之间有间隔的样式
              borderColor: "rgba(14, 18, 34, 1)"
              // shadowColor: 'rgba(0, 0, 0, 0.8)',
              // shadowBlur: 50,
            }
          }
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });

    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(pipenetDataObj) {
      let rdlc = (pipenetDataObj[0].sa_040qc * 100).toFixed(2) || 0;
      let glf = (pipenetDataObj[0].sa_041qc * 100).toFixed(2) || 0;

      (this.options.series[0].data = [
        {
          value: rdlc,
          name: "热电联产"
        },
        {
          value: glf,
          name: "锅炉房"
        }
      ].sort(function(a, b) {
        //【2019年11月8日】为了量多的显示深蓝色 sort以后是从小到大排的 所以需要把浅色的放在前面
        return a.value - b.value;
      })),
        this.myChart.setOption(this.options);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>